<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宣传页</title>
    <link rel="stylesheet" href="src/css/index.css">
</head>
<body>
    <header class="demo">
        <div>
            <img src="src/imge/header/logo.png" alt="">
        </div>
        <div id="header-right">
            <h1>作品展示</h1>
            <h1>团队成员</h1>
            <h1>联系我们</h1>
        </div>
    </header>
    <main class="demo">
        <section id="carousel">
            <div>
                <img style="width: 100%;height: 100%" src="src/imge/header/char.png" alt="">
            </div>
            <div id="intro">
                <h1>关于我们</h1>
                <p>ABAC是国内专业的设计公司，专注于三维设计，动画设计，绘画设计</p>
                <p>办公软件设计，影视后期设计，交互设计，网页设计等。</p>
            </div>
        </section>
        <section id="design">
            <div class="demo Flex" id="left">
                <img src="src/imge/body/jian.jpg" alt="">
            </div>
            <div class="demo" id="content">
                <div class="demo Flex" style="grid-column: span 4">
                    <h1>设计大师</h1>
                </div>
                <div class="demo cent">
                    <div class="Flex"><img style="width: 70%;border-radius: 50%" src="src/imge/body/1.jpg" alt=""></div>
                    <div class="Flex" style="flex-direction: column">
                        <h3>11111</h3>
                        <p>1111111111</p>
                        <p>2222222222</p>
                    </div>
                </div>
                <div class="demo cent">
                    <div class="Flex"><img style="width: 70%;border-radius: 50%" src="src/imge/body/2.jpg" alt=""></div>
                    <div class="Flex" style="flex-direction: column">
                        <h3>11111</h3>
                        <p>1111111111</p>
                        <p>2222222222</p>
                    </div>
                </div>
                <div class="demo cent">
                    <div class="Flex"><img style="width: 70%;border-radius: 50%" src="src/imge/body/3.jpg" alt=""></div>
                    <div class="Flex" style="flex-direction: column">
                        <h3>11111</h3>
                        <p>1111111111</p>
                        <p>2222222222</p>
                    </div>
                </div>
            </div>
            <div class="demo Flex" id="right">
                <img src="src/imge/body/jian.jpg" alt="">
            </div>
        </section>
    </main>
    <footer class="demo">
        <section id="map">
            <img src="src/imge/fontter/tu.png" alt="">
        </section>
        <section id="fot">
            <div class="demo Flex">
                <p>1111111111111111111111111111111</p>
                <p>2222222222222222222</p>
            </div>
            <div class="demo Flex">
                <p>1111</p>
                <p>2222</p>
                <p>3333</p>
                <p>4444</p>
            </div>
        </section>
    </footer>
</body>
</html>